﻿准备工作：安装wampserver,并执行SQL文件夹下的SQL语句，创建对应的数据库


第一步:
引入所有的JS文件，包括了
bootstrap的CSS样式
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css">
表格的样式
<link rel="stylesheet" href="js/ng-grid-2.0.12/ng-grid.css">
JQ的文件
<script src="js/jquery-1.9.1.js"></script>
angular的文件
<script src="js/angular-1.3.0.14/angular.js"></script>
让angular支持动画操作
<script src="js/angular-1.3.0.14/angular-animate.min.js"></script>
angular路由的支持
<script src="js/angular-ui-router.js"></script>
angular中提供了支持boostrap的功能
<script src="js/ui-bootstrap-tpls-0.11.0.js"></script>
angular设计表格
<script src="js/ng-grid-2.0.12/ng-grid.debug.js"></script>
分页
<script src="js/page.js"></script>
动画样式
<link rel="stylesheet" href="css/animations.css">
我们自定义的一些样式
<link rel="stylesheet" href="css/app.css">
启动核心代码
<script src="js/app.js"></script>
动画
<script src="js/animations.js"></script>
所有的控制器
<script src="js/controllers.js"></script>
所有的过滤器
<script src="js/filters.js"></script>
所有的服务
<script src="js/services.js"></script>

第二步：
创建angular模块，并配置路由

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});

<!--uiRouter自制服务-->
routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/index');
$stateProvider
});

第三步:
我们首先要创建我们的首页路由,让用户在打开这个项目的时候，进入登录页面

在index.html中添加
<div ui-view></div>来交给路由处理

在$stateProvider中添加首页路由

.state('index',{
url:'/index',
views:{
'':{
templateUrl:'tpls/home.html'
},
'main@index':{
templateUrl:'tpls/login.html'
}
}
})

在home.html中添加main视图

<div class="container">
    <div ui-view="main"></div>
</div>

最后创建login.html用户登录页面

这里，我们要说明一下，任何一个页面都需要一个单独的模块来进行管理才行,一个页面对应一个模块

<div class="container" ng-app="loginApp" ng-controller="loginController">
    <div class="col-md-6 col-md-offset-3">
        <div class="page-header">
            <h1>angularJS 前端MVC开发实例</h1>
        </div>
        <form ng-submit="postForm()">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="username" class="form-control" placeholder="用户名" ng-model="formData.username">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" name="password" class="form-control" placeholder="密码" ng-model="formData.password">
            </div>
            <buton type="submit" class="btn btn-success btn-lg btn-block">
                <span class="glyphicon glyphicon-flash"></span> 提交
            </buton>
        </form>
    </div>
</div>

第四步:

完成我们登录的业务逻辑

创建登录模块loginApp,创建登录模块下的登录控制器loginController,让它来管理整个登录逻辑,并选择在app.js中注入这个模块.

//创建login模块

var loginApp = angular.module('loginApp',[]);
loginApp.controller('loginController',function($scope,$http){
$scope.formData = {};
$scope.postForm = function(){
//这句话必须加
$scope.formData.action='login';
$http({
method:'POST',
url:'./get.php',
data: $.param($scope.formData),
headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).success(function(data){
console.log(data);
if(!data.success){
if(!data.errors){
$scope.message = data.message;
}else{
$scope.errorUsername = data.errors.username;
$scope.errorPassword = data.errors.password;
}
}else{
window.location.href = '#/0';
}
})
}
})

最后完成错误信息的显示

<span class="help-block" ng-show="errorUsername">{{ errorUsername }}</span>

<span class="help-block" ng-show="errorPassword">{{ errorPassword }}</span>

<div id="messages" class="well" ng-show="message">{{ message }}</div>

第五步:跳转到列表页面

1、首先创建列表路由

.state('list', {
url: '/{type:[0-9]{1,4}}',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/list.html'
},
'type@list': {
templateUrl: 'tpls/type.html'
},
'grid@list': {
templateUrl: 'tpls/grid.html'
}
}
})
2、完善列表页面

<div class="container" ng-app="pageList">
    <div class="page-header">
        <h2>angularJS 前端MVC开发实例</h2>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div ui-view="type">
                分类加载中..
            </div>
        </div>
        <div class="col-md-9">
            <div ui-view="grid">
                列表加载中...
            </div>
        </div>
    </div>
</div>

3、完善type.html

<div id="myTab" class="list-group" ng-controller="ListTypeCtrl">
    <a href="javascript:void(0);" class="list-group-item active">类别名称</a>
    <a ui-sref="list({type:0})" class="list-group-item">全部</a>
    <a ng-repeat="list in lists" ui-sref="list({type:{{list.id}}})" class="list-group-item">{{list.typename}}</a>
</div>

4、创建pageList模块，创建ListTypeCtrl控制器,并加载到routerApp中去.

var pageList = angular.module('pageList',[]);
pageList.controller('ListTypeCtrl',function($scope,$http){
$http({
method:'GET',
url:'get.php?action=get_arctype&where=reid=0'
}).success(function(data,status,headers,config){
$scope.lists = data;
}).error(function(data,status,headers,config){
console.log('error...');
})
})

5.创建arcListCtrl控制器

totals = 0;
pageList.controller('arcListCtrl',function($scope,$http,$location){
//首先先获取到当前的路径
$scope.typeid = $location.path().replace('/','');
//获取文章的总数
if($scope.typeid==0){
$get_total_url = 'get.php?action=get_total';
}else{
$get_total_url = 'get.php?action=get_total&where=typeid=' + $scope.typeid;
}
//发送请求
$http({
method:'GET',
url:$get_total_url
}).success(function(data,status,headers,config){
$scope.paginationConf.totalItems = data.total;
}).error(function(data,status,headers,config){
console.log('error....');
})

//获取到总的文章数量之后，我们其实就可以开始设置分页显示内容了.

$scope.paginationConf = {
currentPage:1,
itemsPerPage:5,
pagesLength:5,
//这里一定要注意有一个空格
perPageOptions:[10, 20, 30, 40, 50],
rememberPerPage:'perPageItems',
onChange:function(){
//获取分页的开始数
if($scope.paginationConf.currentPage == 1){
$scope.limit = 0;
}else{
//比如这里从第二页开始，那么每页显示五条数据，那么第二页就应该从第五条数据后显示五条才行.
$scope.limit = $scope.paginationConf.currentPage * $scope.paginationConf.itemsPerPage - $scope.paginationConf.itemsPerPage;
}

//根据当前的type类型，显示不同的栏目里面的内容,先显示的就是第一页的五条数据
if($scope.typeid == 0){
$geturl = 'get.php?action=get_list&offset=' + $scope.limit + 'rows=' + $scope.paginationConf.itemsPerPage + '&orderField=id&orderBy=DESC';
}else{
$geturl='get.php?action=get_list&offset='+$scope.limit+'&rows='+$scope.paginationConf.itemsPerPage+'&where=typeid='+$scope.typeid+'&orderField=id&orderBy=DESC';
}
$http({
method:'GET',
url:$geturl,
}).success(function(data,status,headers,config){
$scope.lists = data;
console.log(data);
}).error(function(data,status,headers,config){
console.log('error....')
})
}
}
6、完善grid.html页面

<div class="tab-content" ng-controller="arcListCtrl">
    <!--这是显示错误信息的地方-->
    <div class="row megbox">
        <div id="successbox" role="alert" ng-show="meg_success">
            {{meg_success}}
        </div>
        <div id="errorbox" role="alert" ng-show="meg_error">
            {{meg_error}}
        </div>
    </div>
    <!--页面内容的显示-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <a ui-sref="add" class="btn btn-primary">新增内容</a>
        </div>
        <div class="panel-body">
            <table class="table">
                <tr>
                    <th>标题</th>
                    <th class="center">操作</th>
                </tr>
                <tr ng-repeat="list in lists">
                    <td>
                        {{list.title}}
                    </td>
                    <td class="center">
                        <div class="btn-group btn-group-xs" role="group">
                            <a ui-sref="show({Id:{{list.id}}})" class="btn btn-primary">详情</a>
                            <a ui-sref="modify({Id:{{list.id}}})" class="btn btn-info">修改</a>
                            <!--                            ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。-->
                            <a ng-click="del($index,list.id)" class="btn btn-danger">删除</a>
                        </div>
                    </td>
                </tr>
            </table>
            <!--     看不懂   ❀    -->
            <xg-page conf="paginationConf"></xg-page>
        </div>
    </div>
</div>

第六步:新增

1、创建新增路由
.state('add',{
url:'/add',
views: {
'': {
templateUrl: 'tpls/add.html'
},
'type@add': {
templateUrl: 'tpls/type.html'
},
'addcon@add': {
templateUrl: 'tpls/addcon.html'
}
}
})
2、创建新增页面

<div class="container">
    <div class="page-header">
        <h2>Angularjs 前端MVC开发实例</h2>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div ui-view="type">
                分类加载中...
            </div>
        </div>
        <div class="col-md-9">
            <div ui-view="addcon">
                列表加载中...
            </div>
        </div>
    </div>
</div>

3、创建新增表单页面addcon.html

<div class="panel panel-primary" ng-app="addCont">
    <div class="panel-heading">
        <div class="panel-title">新增内容</div>
    </div>
    <div class="panel-body" ng-controller="AddContCtrl">
        <!--错误页面-->
        <div class="row megbox">
            <!--            ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。-->
            <div id="successbox" role="alert" ng-show="meg_success">
                {{meg_success}}
            </div>
            <div id="errorbox" role="alert" ng-show="meg_error">
                {{meg_error}}
            </div>
        </div>
        <!--提交表单-->
        <div class="row">
            <div class="col-md-12">
                <form class="form-horizontal" role="form" name="form" ng-submit="postForm()">
                    <div class="form-group">
                        <label class="col-md-2">
                            标题:
                        </label>
                        <div class="col-md-10">
                            <input type="text" name="title" class="form-control" placeholder="标题"
                                   ng-model="formData.title" ng-click="errorBye()">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            内容：
                        </label>
                        <div class="col-md-10">
                            <textarea rows="6" name="content" class="form-control" placeholder="内容"
                                      ng-model="formData.content" ng-click="errorBye()"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            类别：
                        </label>
                        <div class="col-md-3">
                            <!--                            ng-options 指令用于使用 <options> 填充 <select> 元素的选项。-->
                            <!--                                    ng-options 指令使用数组来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。-->
                            <select name="typeid" class="form-control" ng-model="formData.typeid"
                                    ng-options="m.typename for m in lists" ng-click="errorBye()">
                                <option value="">-- 选择分类 --</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="保存" class="btn btn-success" ng-disabled="!form.$dirty"
                                   ng-click="errorShow()"/>
                            <a ui-sref="list({type:0})" class="btn btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

4、创建新增模块addCont,创建新增控制器AddContCtrl,别忘了添加到routerApp模块

var addCont = angular.module('addCont',[]);
addCont.controller('AddContCtrl',function($scope,$http){
//获取分类的列表
$http({
method:'GET',
url:'get.php?action=get_arctype&where=reid=0'
}).success(function(data,status,headers,config){
$scope.lists = data;
}).error(function(data,status,headers,config){
console.log('get type is error');
})
//执行写入数据的操作
$scope.formData = {};
$scope.formData.action = 'add_article';
$scope.postForm = function(){
$http({
method:'POST',
url:'get.php',
data: $.param($scope.formData),
headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).success(function(data){
$scope.errorBye = function(){
$('#errorbox').fadeOut();
}
$scope.errorShow = function(){
$('#errorbox').fadeIn();
}
if(!data.errors){
$scope.meg_success = '插入成功！正在返回列表页面..';
$scope.meg_error = '';
setTimeout(function(){location.href='#/0'},1000);
}else{
//添加失败
$scope.meg_success = '';
var get_error = '';
if(data.errors.hasOwnProperty('title')){
get_error=data.errors.title;
}
if(data.errors.hasOwnProperty('content')){
get_error=get_error+(get_error?"&":"")+data.errors.content;
}
if(data.errors.hasOwnProperty('typeid')){
get_error=get_error+(get_error?"&":"")+data.errors.typeid;
}
$scope.meg_error=get_error;

}
})
}
})

第七步:修改数据

1.创建修改的路由

.state('modify', {
url: '/modify/:Id',
views: {
'': {
templateUrl: 'tpls/modify.html'
},
'type@modify': {
templateUrl: 'tpls/type.html'
},
'modifycon@modify': {
templateUrl: 'tpls/modifycon.html'
}
}
})

2、创建修改页面modify.html

<div class="container" an-app="pageList">
    <div class="page-header">
        <h2>Angularjs 前端MVC开发实例</h2>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div ui-view="type">
                分类加载中...
            </div>
        </div>
        <div class="col-md-9">
            <div ui-view="modifycon">
                列表加载中...
            </div>
        </div>
    </div>
</div>

3、创建修改的列表modifycon.html

<div class="panel panel-primary" ng-app="modifyCont">
    <div class="panel-heading">
        <div class="panel-title">修改内容</div>
    </div>
    <div class="panel-body" ng-controller="ModifyContCtrl">

        <div class="row megbox">
            <div id="successbox" role="alert" ng-show="meg_success">
                {{meg_success}}
            </div>
            <div id="errorbox" role="alert" ng-show="meg_error">
                {{meg_error}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <form class="form-horizontal" name="form" ng-submit="postForm()">

                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            标题：
                        </label>
                        <div class="col-md-10">
                            <input type="text" name="title" id="title" class="form-control" value="{{lists.title}}"
                                   ng-click="errorBye()"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            内容：
                        </label>
                        <div class="col-md-10">
                            <textarea name="content" id="content" rows="6" class="form-control" ng-click="errorBye()">{{lists.content}}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">
                            类别：
                        </label>
                        <div class="col-md-10">
                            <!--                            ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。-->
                            <select class="form-control" name="typeid" id="typeid" ng-click="errorBye()">
                                <option ng-show="{{tclick}}" value="{{lists.typeid}}" checked>{{lists.typename}}
                                </option>
                                <option ng-repeat="type in types" value="{{type.id}}">{{type.typename}}</option>
                            </select>

                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="保存" class="btn btn-success" ng-click="errorShow()"/>
                            <a ui-sref="list({type:0})" class="btn btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

4.创建修改的模块modifyCont,创建修改的控制器ModifyContCtrl,别忘了添加到routerApp 中去
//修改模块
var modifyCont = angular.module('modifyCont',[]);
modifyCont.controller('modifyContCtrl',function($scope,$http,$stateParams){
//获取分类列表
$http({
method: 'GET',
url: 'get.php?action=get_arctype&where=reid=0'
}).success(function(data, status, headers, config) {
$scope.types=data;
}).error(function(data, status, headers, config) {
console.log("get type list error...");
});
//读取这一条数据
console.log($stateParams);
$http({
method: 'GET',
url: 'get.php?action=get_article&id='+$stateParams.Id
}).success(function(data, status, headers, config) {
$scope.lists=data;
}).error(function(data, status, headers, config) {
console.log("error...");
});
//更新数据
$scope.formData = {};
$scope.postForm = function() {
$scope.formData.action = 'update_article';
$scope.formData.id = $stateParams.Id;
$scope.formData.title = form.title.value;
$scope.formData.content = form.content.value;
$scope.formData.typeid = $("#typeid option:selected").val();//待优化取值方式
$http({
method : 'POST',
url: 'get.php',
data: $.param($scope.formData),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function(data) {
console.log(data);
if (data.code==101) {
//添加成功
console.log('修改成功');
$scope.meg_success="修改成功! 正在返回列表页...";
$scope.meg_error="";
setTimeout(function(){location.href='#/list/0'}, 1000);
} else {
//添加失败
console.log('修改失败');
var get_errors="";
$scope.meg_success="";
//信息提示框状态
$scope.errorBye=function(){
$('#errorbox').fadeOut();
}
$scope.errorShow=function(){
$('#errorbox').fadeIn();
$scope.meg_error='';
}
if(data.errors){
console.log("有错误信息");
if(data.errors.hasOwnProperty('title')){
get_errors=data.errors.title;
}
if(data.errors.hasOwnProperty('content')){
get_errors=get_errors+(get_errors?"&":"")+data.errors.content;
}
$scope.meg_error=get_errors;
}else{
console.log("无错误信息");
$scope.meg_error="修改失败，无改动！";
}
}
});
};
})

第八步:查询数据的内容

1、创建查询数据的路由

.state('show', {
url: '/show/:Id',
views: {
'': {
templateUrl: 'tpls/show.html'
},
'type@show': {
templateUrl: 'tpls/type.html'
},
'showcon@show': {
templateUrl: 'tpls/showcon.html'
}
}
})
2.创建show.html页面

<div class="container">
    <div class="page-header">
        <h2>angularJS增删改项目</h2>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div ui-view="type"></div>
        </div>
        <div class="col-md-9">
            <div ui-view="showcon"></div>
        </div>
    </div>
</div>
3.创建showcon.html查看列表

<div class="panel panel-primary" ng-controller="ShowContCtrl">
    <div class="panel-heading">
        <div class="panel-title">{{lists.title}}</div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">

                {{lists.content}}

            </div>
        </div>
    </div>
</div>

4、创建查看模块showCont,创建查看控制器ShowContCtrl,别忘了添加到routerApp中去


var showCont = angular.module("showCont", []);
showCont.controller('ShowContCtrl', function($scope, $http, $stateParams) {
console.log($stateParams.Id);
$http({
method: 'GET',
url: 'get.php?action=get_article&id='+$stateParams.Id
}).success(function(data, status, headers, config) {
console.log("success...");
console.log(data);
$scope.lists=data;
}).error(function(data, status, headers, config) {
console.log("error...");
});
});


//删除功能留下让自己大家去完善和学习去.










